<template>
  <div class="sales-board-des">
    <div class="sales-board-intro">
      <h2>数代付款</h2>
      <p>
        历顶顶顶顶史资料、科学实验、检验、统计等所获得的和用于科学研究、技术设计、查证、决策等的数值加以统计为解决方案做前期准备。
      </p>
    </div>
    <div class="sales-board-form">
      <div class="sales-board-line">
        <div class="sales-board-line-left">3产品类型：</div>
        <div class="sales-board-line-right">
          <!-- <v-chooser :selections="buyTypes"></v-chooser> -->
        </div>
      </div>
      <div class="sales-board-line">
        <div class="sales-board-line-left">3适用地区：</div>
        <div class="sales-board-line-right">
          <!-- <v-selection :selections="districts"></v-selection> -->
        </div>
      </div>
      <div class="sales-board-line">
        <div class="sales-board-line-left">3有效时间：</div>
        <div class="sales-board-line-right">半年</div>
      </div>
      <div class="sales-board-line">
        <div class="sales-board-line-left">3总价：</div>
        <div class="sales-board-line-right">500 元</div>
      </div>
      <div class="sales-board-line">
        <div class="sales-board-line-left">&nbsp;</div>
        <div class="sales-board-line-right">
          <div class="button" @click="aaa">立即购买</div>
        </div>
      </div>
    </div>
    <div class="right">
      <h3>this.$nextTick</h3>
      <span>
        在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中,在created()钩子函数执行的时候DOM其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，
        所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted()钩子函数，因为该钩子函数执行时所有的DOM挂载和渲染都已完成，
        此时在该钩子函数中进行任何DOM操作都不会有问题;;;2.在数据变化后要执行的某个操作，而这个操作需要使用随数据改变而改变的DOM结构的时候，这个操作都应该放进Vue.nextTick()的回调函数中。
      </span>
      <div ref="msgDiv">{{ msg }}</div>
      <div v-if="msg1">Message got outside $nextTick: {{ msg1 }}</div>
      <div v-if="msg2">Message got inside $nextTick: {{ msg2 }}</div>
      <div v-if="msg3">Message got outside $nextTick: {{ msg3 }}</div>
      <button @click="changeMsg">改变 Msg值</button>
      <div>
        <button @click="hahah">展开运算符</button>
      </div>
    </div>
    <div class="rightnav">
      <h2>keep-alive</h2>
      <span class="ptwo">
        keep-alive是一个抽象组件：它自身不会渲染一个DOM元素，也不会出现在父组件链中；使用keep-alive包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。
      </span>
      <p>
        场景：在列表页面选择筛选一份数据列表然后计入数据详情页
        退出来列表页想继续保持筛选状态
      </p>
      <p class="pone">
        keep-alive不仅保留页面、组件的状态 还可以避免组件创建和渲染
        有效提升系统性能 keep-alive用于保存组建的渲染状态
      </p>
      <span class="ps">
        &lt;keep-alive :include="whiteList" :exclude="blackList"
        :max="amount">&lt;router-view>&lt;/router-view>&lt;/keep-alive>
      </span>
      <p>
        include定义缓存白名单，keep-alive会缓存命中的组件；exclude定义缓存黑名单，被命中的组件将不会被缓存；max定义缓存组件上限，超出上限使用LRU的策略置换缓存数据
      </p>
    </div>
    <product class="bottom"></product>
  </div>
</template>

<script>
import product from "./product.vue";
// import VSelection from '../../components/base/selection'
// import VChooser from '../../components/base/chooser'
export default {
  name: "count",
  components: {
    // VChooser,
    // VSelection,
    product,
  },
  data() {
    return {
      msg: "Hello Vue.",
      msg1: "",
      msg2: "",
      msg3: "",
      buyTypes: [
        {
          label: "红色版",
          value: 0,
        },
        {
          label: "绿色版",
          value: 1,
        },
        {
          label: "紫色版",
          value: 2,
        },
      ],
      districts: [
        {
          label: "北京",
          value: 0,
        },
        {
          label: "上海",
          value: 1,
        },
        {
          label: "广州",
          value: 2,
        },
        {
          label: "天津",
          value: 3,
        },
        {
          label: "武汉",
          value: 4,
        },
        {
          label: "重庆",
          value: 5,
        },
      ],
    };
  },
  methods: {
    hahah() {
      // 假设我有几个需要合并的对象，那么这是我的首选方法  这三个点在 JavaScript 中也称为展开运算符
      const user = {
        name: "John Ludwig",
        gender: "Male",
      };
      const college = {
        primary: "Mani Primary School",
        secondary: "Lass Secondary School",
      };
      const skills = {
        programming: "Extreme",
        swimming: "Average",
        sleeping: "Pro",
        name: "ssss",
      };
      const summary = { ...user, ...college, ...skills };
      console.log(summary);
    },
    changeMsg() {
      this.msg = "Hello world.";
      this.msg1 = this.$refs.msgDiv.innerHTML;
      this.$nextTick(() => {
        this.msg2 = this.$refs.msgDiv.innerHTML;
      });
      this.msg3 = this.$refs.msgDiv.innerHTML;
    },
    aaa() {
      this.$router.replace({
        name: "multiplyChooser",
      });
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang='less'>
.sales-board-des {
  border-top: 20px solid #f0f2f5;
  padding: 15px 20px;
}
.sales-board-form {
  width: 400px;
  height: 300px;
  padding: 0px;
  margin-top: 20px;
}
.right {
  span {
    display: block;
    margin-bottom: 10px;
  }
  margin-top: 20px;
  float: left;
  width: 800px;
  height: 300px;
  margin-left: 20px;
  border: 1px solid rgb(0, 195, 255);
  button {
    margin-top: 10px;
    height: 25px;
  }
}
.rightnav {
  margin-top: 20px;
  float: left;
  width: 550px;
  height: 300px;
  margin-left: 20px;
  border: 1px solid rgb(255, 153, 0);
  .pone {
    color: rgb(247, 51, 51);
  }
  .ptwo {
    color: rgb(115, 248, 7);
  }
  .ps {
    color: rgb(141, 29, 29);
  }
}
.bottom {
  clear: both;
}
</style>
